<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue监测数据的原理</title>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h2>{{name}}</h2>
            <h2>{{age}}</h2>
        </div>

        <script type="text/javascript">
            const vm = new Vue({
                el: '#app',
                data: {
                    // 给_data赋值前，先要做一个getter、setter的处理，在setter方法中重新渲染页面
                    // 可以给单个属性生成getter、setter方法
                    name: 'wjz',
                    age: 23,
                    // 底层递归调用，也可以给对象属性生成getter、setter方法
                    school: {
                        small: 'mingdao',
                        middle: 'zishi',
                        high: 'shiyan'
                    },
                    // 放在数组中的元素也依然可以生成getter、setter方法
                    // todo 注意：但是vue并没有对数组中下标元素生成getter、setter方法，所以如果修改vm.friends[0] = {name:'zhangsan2',age: 22}并不会被vue检测到
                    // vm.friends[0]是直接赋值，没有效果，可以使用数组自带的方法操作数组可以实现动态渲染，例如：
                    /* push - 新增最后一个元素
                       pop - 删除最后一个元素
                       shift - 删除第一个
                       unshift - 新增第一个
                       splice - 指定位置插入、删除、替换元素
                       sort - 排序
                       reverse - 反转
                       这写数组的方法被vue重写了
                    */
                    friends: [
                        {name:'zhangsan',age: 22},
                        {name:'lisi',age: 12},
                        {name:'wangwu',age: 92}
                    ]
                }
            })
            // 如果要动态的给data中的某个对象添加属性，单纯的添加是不行的，例如school.work = 'suzhou'，这样生成的属性没有getter、setter方法，可以使用Vue.set
            // Vue.set(vm._data.school,'work','suzhou');
            Vue.set(vm.school,'work','suzhou');
            // 或
            // vm.$set(vm.school,'work','suzhou')
            // todo 注意，不可以在data中动态添加属性，只能对某个data中的对象添加属性
        </script>
    </body>
</html>